import { useState } from 'react';
import { useLanguage } from '@kernelproxy/i18n';
import { 
  Users, 
  DollarSign, 
  TrendingUp, 
  Copy, 
  Check,
  Gift,
  BarChart3,
  Percent
} from 'lucide-react';

const Affiliates = () => {
  const { language } = useLanguage();
  const [copied, setCopied] = useState(false);
  
  // Mock affiliate data
  const affiliateCode = 'KERNEL2025';
  const affiliateLink = `https://kernelproxy.com/?ref=${affiliateCode}`;
  const stats = {
    totalEarnings: 1234.56,
    pendingEarnings: 256.78,
    referrals: 42,
    conversions: 28,
    commissionRate: 20
  };

  const handleCopyLink = () => {
    navigator.clipboard.writeText(affiliateLink);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const handleCopyCode = () => {
    navigator.clipboard.writeText(affiliateCode);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg p-6 text-white">
        <div className="flex items-center gap-3 mb-4">
          <Users size={32} />
          <div>
            <h1 className="text-2xl font-bold">
              {language === 'zh-CN' ? '联盟营销计划' : 'Affiliate Program'}
            </h1>
            <p className="text-blue-100 mt-1">
              {language === 'zh-CN' 
                ? '推荐朋友，赚取丰厚佣金' 
                : 'Refer friends and earn generous commissions'}
            </p>
          </div>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm text-gray-600 dark:text-gray-400">
              {language === 'zh-CN' ? '总收入' : 'Total Earnings'}
            </span>
            <DollarSign className="text-green-600" size={20} />
          </div>
          <div className="text-2xl font-bold text-gray-900 dark:text-white">
            ${stats.totalEarnings.toFixed(2)}
          </div>
        </div>

        <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm text-gray-600 dark:text-gray-400">
              {language === 'zh-CN' ? '待结算' : 'Pending'}
            </span>
            <TrendingUp className="text-yellow-600" size={20} />
          </div>
          <div className="text-2xl font-bold text-gray-900 dark:text-white">
            ${stats.pendingEarnings.toFixed(2)}
          </div>
        </div>

        <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm text-gray-600 dark:text-gray-400">
              {language === 'zh-CN' ? '推荐人数' : 'Referrals'}
            </span>
            <Users className="text-blue-600" size={20} />
          </div>
          <div className="text-2xl font-bold text-gray-900 dark:text-white">
            {stats.referrals}
          </div>
        </div>

        <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm text-gray-600 dark:text-gray-400">
              {language === 'zh-CN' ? '佣金比例' : 'Commission Rate'}
            </span>
            <Percent className="text-purple-600" size={20} />
          </div>
          <div className="text-2xl font-bold text-gray-900 dark:text-white">
            {stats.commissionRate}%
          </div>
        </div>
      </div>

      {/* Referral Link Section */}
      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <Gift size={20} />
          {language === 'zh-CN' ? '您的推荐链接' : 'Your Referral Link'}
        </h2>
        
        <div className="space-y-4">
          {/* Referral Code */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {language === 'zh-CN' ? '推荐码' : 'Referral Code'}
            </label>
            <div className="flex gap-2">
              <input
                type="text"
                value={affiliateCode}
                readOnly
                className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white"
              />
              <button
                onClick={handleCopyCode}
                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center gap-2"
              >
                {copied ? <Check size={18} /> : <Copy size={18} />}
                {language === 'zh-CN' ? '复制' : 'Copy'}
              </button>
            </div>
          </div>

          {/* Referral Link */}
          <div>
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              {language === 'zh-CN' ? '推荐链接' : 'Referral Link'}
            </label>
            <div className="flex gap-2">
              <input
                type="text"
                value={affiliateLink}
                readOnly
                className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white"
              />
              <button
                onClick={handleCopyLink}
                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors flex items-center gap-2"
              >
                {copied ? <Check size={18} /> : <Copy size={18} />}
                {language === 'zh-CN' ? '复制' : 'Copy'}
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* How It Works */}
      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
          <BarChart3 size={20} />
          {language === 'zh-CN' ? '如何运作' : 'How It Works'}
        </h2>
        
        <div className="space-y-4">
          <div className="flex gap-4">
            <div className="flex-shrink-0 w-8 h-8 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center font-bold">
              1
            </div>
            <div>
              <h3 className="font-medium text-gray-900 dark:text-white mb-1">
                {language === 'zh-CN' ? '分享您的链接' : 'Share Your Link'}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {language === 'zh-CN' 
                  ? '将您的专属推荐链接分享给朋友、社交媒体或您的网站' 
                  : 'Share your unique referral link with friends, on social media, or on your website'}
              </p>
            </div>
          </div>

          <div className="flex gap-4">
            <div className="flex-shrink-0 w-8 h-8 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center font-bold">
              2
            </div>
            <div>
              <h3 className="font-medium text-gray-900 dark:text-white mb-1">
                {language === 'zh-CN' ? '他们注册并购买' : 'They Sign Up & Purchase'}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {language === 'zh-CN' 
                  ? '当有人通过您的链接注册并购买服务时' 
                  : 'When someone signs up through your link and makes a purchase'}
              </p>
            </div>
          </div>

          <div className="flex gap-4">
            <div className="flex-shrink-0 w-8 h-8 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded-full flex items-center justify-center font-bold">
              3
            </div>
            <div>
              <h3 className="font-medium text-gray-900 dark:text-white mb-1">
                {language === 'zh-CN' ? '赚取佣金' : 'Earn Commission'}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {language === 'zh-CN' 
                  ? `您将获得 ${stats.commissionRate}% 的佣金，自动记入您的账户` 
                  : `You earn ${stats.commissionRate}% commission, automatically credited to your account`}
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Recent Activity */}
      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
          {language === 'zh-CN' ? '最近活动' : 'Recent Activity'}
        </h2>
        
        <div className="space-y-3">
          <div className="flex items-center justify-between py-3 border-b border-gray-200 dark:border-gray-700">
            <div>
              <p className="text-sm font-medium text-gray-900 dark:text-white">
                {language === 'zh-CN' ? '新推荐用户' : 'New Referral'}
              </p>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                2025-10-08 14:30
              </p>
            </div>
            <span className="text-green-600 dark:text-green-400 font-medium">
              +$25.00
            </span>
          </div>

          <div className="flex items-center justify-between py-3 border-b border-gray-200 dark:border-gray-700">
            <div>
              <p className="text-sm font-medium text-gray-900 dark:text-white">
                {language === 'zh-CN' ? '新推荐用户' : 'New Referral'}
              </p>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                2025-10-07 09:15
              </p>
            </div>
            <span className="text-green-600 dark:text-green-400 font-medium">
              +$50.00
            </span>
          </div>

          <div className="flex items-center justify-between py-3">
            <div>
              <p className="text-sm font-medium text-gray-900 dark:text-white">
                {language === 'zh-CN' ? '续费佣金' : 'Renewal Commission'}
              </p>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                2025-10-06 16:45
              </p>
            </div>
            <span className="text-green-600 dark:text-green-400 font-medium">
              +$15.00
            </span>
          </div>
        </div>
      </div>

      {/* Terms */}
      <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
        <p className="text-sm text-blue-900 dark:text-blue-100">
          <strong>{language === 'zh-CN' ? '注意：' : 'Note:'}</strong>{' '}
          {language === 'zh-CN' 
            ? '佣金将在推荐用户完成支付后的 30 天内结算到您的账户。最低提现金额为 $100。' 
            : 'Commissions are settled within 30 days after the referred user completes payment. Minimum withdrawal amount is $100.'}
        </p>
      </div>
    </div>
  );
};

export default Affiliates;
